﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section style{
    <style>
        .file-input img.initialImage{
            width:auto;
            height:auto;
            max-width:100%;
            max-height:100%;
        }
    </style>
}
@section script{
    <script>
        $(function () {
            $("#file").fileinput({
                language: 'zh',
                showCaption: true,//是否显示文件标题。默认为true
                showPreview: true,//是否显示文件预览。默认为true
                showUpload: true,//是否显示文件上传按钮。默认为true。这将默认为非ajax方案的表单提交按钮的uploadURL没有指定。对于ajax上传情况，这将使用的uploadURL 作为链接
                showRemove: false,//是否显示文件删除/清除按钮。默认为true
                showCancel: false,//是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才能启用和显示
                showClose: false,//是否在预览中显示关闭图标。默认为“true”。这将只有当showPreview是真的或当您{close}在预览模板中使用标签时才会被解析。
                showBrowse: true,//是否显示文件浏览按钮。默认为true
                browseOnZoneClick: false,//是否启用文件浏览/点击预览区域选择。默认为false
                //mainClass:'btn btn-success',
                initialCaption:'123',
                deleteUrl: "/Home/DeleteFile",
                initialPreview: [
                    "<img src='http://i.meizitu.net/thumbs/2017/10/104976_08b18_236.jpg' class='file-preview-image initialImage' alt='pic1' title='pic1'>",
                    "<img src='http://i.meizitu.net/thumbs/2017/10/104883_07c15_236.jpg' class='file-preview-image initialImage' alt='pic1' title='pic1'>"
                ],
                initialPreviewShowDelete: true,
                initialPreviewConfig: [
                    {
                        caption: '文件1的名字.jpg',
                        size: 1099511627776,
                        filetype: 'image/jpeg',
                        previewAsData:false,
                        key: 100,
                        extra: {id: 100}
                    },
                    {
                        caption: '文件2的名字.jpg',
                        filetype: 'image/jpeg',
                        size: 1099511627776,
                        url: '/Home/DeleteFile',
                        key: 101, 
                        frameClass: 'my-custom-frame-css',
                        frameAttr: {
                            title: 'My Custom Title',
                        },
                        extra: function() { 
                            return {id: $("#id").val()};
                        },
                    }
                ],
                overwriteInitial: false//是否要覆盖初始预览内容和字幕设置。默认情况下true，任何initialPreview内容集将被覆盖，新文件上传或文件被清除时。将其设置为false有助于从数据库中始终显示保存的图像或文件，尤其是在使用multiple文件上传功能时尤其有用。
            });
        })
    </script>    
}
<form action="/Home/UploadFile" enctype="multipart/form-data">
    <input id="file" type="file"/>
</form>
